import React from 'react'
import { BrowserRouter, Switch, Route, Redirect, Link } from "react-router-dom"
import Protected from './Protected'
import ScrollList from './MyScrollListTest'
import UseHooks from './UseHooks'
import TestReactKey from './TestReactKey'
import ImgLazyload from './ImgLazyload'

import zipString from '../utils/useClass.js'

// 测试 Webpack5 的 HMR + React
import WebpackHMRComponent from './WebpackHMRComponent'


function Index() {
    return <div>自定义实现的组件，Service各种方法、算法等</div>
}

function Home() {
  return (
    <div className="home">
      {/* HMR测试组件 */}
      <WebpackHMRComponent />

      {/* 路由测试 */}
      <BrowserRouter>
        <Link to="/"><p>Home</p></Link>
        <Link to="/protected"><p>Protected</p></Link>
        <Link to="/list"><p>scroll-list</p></Link>
        <Link to="/hooks"><p>useHooks</p></Link>
        <Link to="/react-key"><p>TestReactKey</p></Link>
        <Link to="/img-lazyload"><p>ImgLazyload</p></Link>

        <Switch>
          <Route path="/" component={Index} exact />
          {/* render 实现路由守卫 */}
          {/* https://reactrouter.com/web/api/Route/render-func */}
          <Route path="/protected" render={() => <Protected />} />
          <Route path="/list" component={ScrollList} />
          <Route path="/hooks" component={UseHooks} />
          <Route path="/react-key" component={TestReactKey} />
          <Route path="/img-lazyload" component={ImgLazyload} />
        </Switch>
      </BrowserRouter>
    </div>
  )
}

export default Home



